<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/layui.css}"  media="all" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/search.css}"/>
</head>
<body>
<!--轮播图片-->
<div class="layui-carousel" id="test1">
    <div carousel-item="">
        <div><img src="image/lun.jpg" width="100%" height="100%"/></div>
        <div><img src="image/lun2.jpg" width="100%" height="100%"/></div>
        <div><img src="image/13.jpg" width="100%" height="120%"/></div>
    </div>
</div>


<fieldset class="layui-elem-field layui-field-title">
    <legend><span class="" style="font-size: 14px">
        <a href="/dor/indexdemo">首页<span class="layui-box">&gt;</span></a>
  <span>查寝情况<span class="layui-box">&gt;</span></span>
  <span>违规情况<span class="layui-box">&gt;</span></span>
</span>
    </legend>
</fieldset>
<div style="position:relative; left: 10px">
    <input class="layui-btn layui-btn-normal" type="button" value="添加一条违规信息"
           onClick="location.href='http://127.0.0.1:8080/dor/addRule'" />
</div>
<div style="display: flex;position: relative;left: 20px;top: 7px;" class="demoTable">
    <select name="target" class="search_select">
        <option value="1">日期</option>
        <option value="2">寝室号</option>
        <option value="" selected="selected" hidden="hidden">类型</option>
    </select>
    <form id="frm" method="get">
        <div style="display: flex" >
            <div id="sss">
                <input hidden="hidden" type="text" name="searchHea" class="search_select1" id="searchHea" placeholder="请输入搜索的时间"/>
                <select hidden="hidden" id="build"  class="search_select"></select>
                <select hidden="hidden" id="room" class="search_select"></select>
                <input id="r_id" hidden="hidden" name="rid"/>
            </div>
            <button class="layui-btn" data-type="reload" id="ss">搜索</button>
        </div>
    </form>
</div>

<table id="LAY_table_user" lay-filter="demo">
</table>
        <script type="text/html" id="barDemo">
           <!-- <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>-->
            <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
        </script>

        <script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
        <script type="text/javascript" th:src="@{/js/jquery-3.2.1.js}"></script>
<script>
    var sj
    var rid
    layui.use('table', function() {
        var table = layui.table;
        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            , url: '/dor/rule'
            , cols: [[
                {checkbox: true, fixed: true}
                , {field: 'id', title: 'ID', width: 120, sort: true, fixed: true}
                , {field: 'roomId', title: '违规寝室', width: 110, sort: true}
                , {field: 'descript', title: '违规详细', width: 160, sort: true}
                , {field: 'date', title: '检查日期', width: 120, sort: true}
                , {field: '', title: '操作', width: 135, toolbar: '#barDemo'}
            ]]
            , id: 'LAY_table_user'
            , page: true
            , height: 0
        });

        var $ = layui.$, active = {
            reload: function(){
                var query = $('.search_select1').val()
                var query2 = $('#r_id').val()
                table.reload('LAY_table_user', {
                    where: {
                        sj : query,
                        rid : query2
                    }
                });
            }
        };

        $('#ss').on('click', function(e){
            e.preventDefault()
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';

        });
    })
</script>
<script>
    $('.search_select').on('change', function () {
        lx = $(this).val()
        if (lx == 1){
            $('#searchHea').show();
            $('#build').hide();
            $('#build').val("");
            $('#room').hide();
            $('#room').val("");
        }else if(lx == 2){
            $('#build').show();
            $('#room').show();
            $('#searchHea').hide();
            $('#searchHea').val("");
        }

        console.log(lx);
         console.log(rid)
        console.log(sj)
    })

    //时间选择
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#searchHea'
            ,format: 'yyyy/MM/dd'
            ,done: function(value, date, endDate){
                searchHea = value
            }
        });
    });


    //轮播
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'none' //始终显示箭头
            , width: '1080px'
            , height: '150px'
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
<script>
    /*<![CDATA[*/
    $.get('/dor/build', function (data) {
//        console.log(data)
        buildList = '<option>选择楼栋</option>'
        data.forEach(function (value) {
//            console.log(value)
            buildList+='<option>'+value.build_id+'</option>'
        })
        /*  console.log(buildList)*/
        $("#build").html(buildList)
    })

    $("#build").on('click', function () {
        var build = $("#build").val()
        console.log('0'+build)
        $.get('/dor/rooms/'+build, function (data) {
//        console.log(data)
            buildList = '<option>选择寝室</option>'
            data.forEach(function (value) {
//            console.log(value)
                buildList+='<option value="'+value.id+'">'+value.room_id+'</option>'
            })
//            console.log(buildList)
            $("#room").html(buildList)
        })
    })


    /* 寝室编号的拼接*/
    var build;
    var room;
    $('#build').change(function () {
        build = $('#build').val();
        if (build != undefined && room != undefined) {
            $('#r_id').val(room)
        }
    })
    $('#room').change(function () {
        room = $('#room').val()
        if (build != undefined && room != undefined) {
            $('#r_id').val(room)
            console.log(room)
        }
    })
    /*]]>*/
</script>

<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            console.log(obj.data);
            $('#id').val(obj.data.id);
          /*  $('#ty').val(obj.data.ty);*/
            $('#R_id').val(obj.data.R_id);
            $('#descript').val(obj.data.descript);


            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.dm_id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        type: "DELETE",
                        url: "/dor/rule/" + obj.data.id,
                        data: "{}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) { // Play with response returned in JSON format
                            return true;
                        },
                        error: function (msg) {
                            return false;
                        }
                    });

                    obj.del();
                    layer.close(index);
                    // console.log('年后');

                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br/>'+ data.descript + '')
            }
        });

       /* $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });*/
    });
</script>
</body>
</html>